<template>
	<view class="container">
		<top-back-navbar position="fixed" title="我的社区" background="#000" color="#fff"></top-back-navbar>
		<view class="num_box">
			<view class="num_box-left">
					<image :src="resObj.avatar || '/static/haibei/avatar.png'" class="face"></image>
			</view>
			<view class="num_box-right">
				
				<view class="num_box-leftitem">ID号：{{resObj.my_id || 0}}</view>
				<view class="num_box-leftitem" style="margin-top: 10rpx;">级别：{{resObj.levelname}}</view>
				<view class="num_box-leftitem" style="margin-top: 10rpx;">自身业绩：¥{{resObj.self_performance || 0}}</view>
			</view>
		</view>
		<view class="content">
			<view class="jy-yj">
				
				<view class="jy-yj-list">
					<view class="jy-yj-item">
						<view class="list-title">
							<p>总业绩</p>
							<p class="mingxi" @click="$u.route(`/pagesSM/mine_detailed/mine_detailed?type=life_equity_credits`)">明细</p>
						</view>
						<view class="list-num">¥{{resObj.z_all_yj || 0}}</view>
					</view>
					<view class="jy-yj-item border-left padding-left">
						<view class="list-title">
						<p>分享业绩</p>
						<p class="mingxi"  @click="$u.route(`/pagesSM/mine_detailed/mine_detailed?type=life_cd`)">明细</p>
						</view>
						<view class="list-num">{{resObj.zt_yj || 0}}</view>
					</view>
				</view>
				<view class="jy-yj-list">
					<view class="jy-yj-item border-top">
						<view class="list-title">
							<p>当日业绩</p>
							<p class="mingxi" @click="$u.route(`/pagesSM/mine_detailed/mine_detailed?type=life_equity_credits`)">明细</p>
						</view>
						<view class="list-num">¥{{resObj.z_all_tody_yeji || 0}}</view>
					</view>
					<view class="jy-yj-item border-left padding-left border-top">
						<view class="list-title">
							<p>粉丝有效数</p>
							<p class="mingxi"  @click="$u.route(`/pagesSM/mine_detailed/mine_detailed?type=life_cd`)">明细</p>
						</view>
						<view class="list-num">{{resObj.zt_yx_num || 0}}</view>
					</view>
				</view>
			</view> 
			<view class="sale-group">
		
				<view v-for="(item, index) in user_list" :key="index">
					<view class="sale-list sale-list-zu">
						<view class="sale-ids">
							<view class="sale-ids-left">
								<view class="sale-ids-btn">社区ID</view>
								<view class="sale-ids-index">{{item.id}}</view>
								
								<view class="sale-ids-id">{{item.mobile}}</view>
							</view>
							<view class="sale-ids-switch">
								<min-switch :value="item.can_sell_child == 1?true:false" active-color="#c1a1a1" inactive-color="#85673a" @change="switchChange(item, index)"></min-switch>
							</view>
						</view>
						<view class="sale-peron">
							<view class="sale-peron-item"> <text style="color: #ca1a1a;">无效会员：</text> <text>{{(item.ll_ds-item.vld_ds) || 0}}人</text> </view>
							<view class="sale-peron-item"><text style="color: #ca1a1a;">有效会员：</text>{{item.vld_ds}}人</view>
						
							
								<view class="sale-yj-item-text">
									<text :class="[item.have_order == 1?'sale-ids-switch-active':'sale-ids-switch-inactive']">{{item.have_order == 1?'本人已下单':'本人未下单'}}</text>
								</view>
							
						</view>
						<view class="sale-yj">
							<view class="sale-yj-item">
								<view class="sale-yj-item-text" style="color: #ca1a1a;">总业绩</view>
								<view class="sale-yj-item-money" >¥{{item.team_performance_life  || '0.00'}}</view>
								
							</view> 
							<view class="sale-yj-item">
									<view class="sale-yj-item-text" style="color: #ca1a1a;">当日业绩</view>
								<view class="sale-yj-item-money">¥{{item.daily_team_perf_life  || '0.00'}}</view>
							
							</view>
							<view class="sale-yj-item">
								<view class="sale-yj-item-text" style="color: #ca1a1a;">本人消费</view>
								<view class="sale-yj-item-money">¥{{item.xf_price || '0.00'}}</view>
								
							</view>
							
						</view>
					</view>
					<view class="sale-list sale-list-jt" v-for="(val,key) in item.childer" :key="index+'-'+key">
						<view class="sale-ids">
							<view class="sale-ids-left">
								<view class="sale-ids-btn-jt">社区ID</view>
								<view class="sale-ids-index">{{val.id}}</view>
								
								<view class="sale-ids-id">{{val.mobile}}</view>
							</view>
							<view class="sale-ids-switch"></view>
						</view>
						<view class="sale-peron">
							<view class="sale-peron-item">无效会员：{{(val.ll_ds-val.vld_ds) || 0}}人</view>
							<view class="sale-peron-item">有效会员：{{val.vld_ds}}人</view>
							<view class="sale-yj-item-text">
								<text :class="[item.have_order == 1?'sale-ids-switch-active-jt':'sale-ids-switch-inactive-jt']">{{val.have_order == 1?'本人已下单':'本人未下单'}}</text>
							</view>
						</view>
						<view class="sale-yj">
							<view class="sale-yj-item">
								<view class="sale-yj-item-text-jt"  style="color: #ca1a1a;">总业绩</view>
								<view class="sale-yj-item-money-jt">¥{{val.team_performance_life  || '0.00'}}</view>
								
							</view> 
							<view class="sale-yj-item">
								<view class="sale-yj-item-text-jt"  style="color: #ca1a1a;">当日业绩</view>
								<view class="sale-yj-item-money-jt" >¥{{val.daily_team_perf_life  || '0.00'}}</view>
								
							</view>
							<view class="sale-yj-item">
								<view class="sale-yj-item-text-jt"  style="color: #ca1a1a;">本人消费</view>
								<view class="sale-yj-item-money-jt">¥{{val.xf_price || '0.00'}}</view>
								
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import minSwitch from '@/components/min-switch.vue'
	export default {
		components: {
			minSwitch,
		},
		data() {
			return {
				user_list: [],
				res2: [],
				res3: [],
				res4: [],
				openid: '',
				real_name: '',
				real_head_img: '',
				create_time: '',
				resObj: {},
			}
		},
		onLoad: function() {
			this.$GetOpenid().then(res=>{
				this.openid = res;
				this.setajax()
			})
		},
		methods: {
			copyText(text) {
				uni.setClipboardData({
					data: text, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			setajax() {
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.mycommunity&app=1&type=4',
					method: 'POST',
					data: {
						openid: this.openid
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						let list=Array.isArray(res.data.user_list)?res.data.user_list:[];
						list.forEach(item=>{
							item.childer=[]
						})
						this.user_list = list;
						this.resObj = res.data;
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 一级滑块 点开关闭
			switchChange(item, index) {
				if(item.can_sell_child == 0)return;
				uni.showLoading();
				this.$myRequest({
					url:'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.mycommunity&app=1&type=4',
					method:'POST',
					data:{openid:item.openid}
				}).then(res=>{
					uni.hideLoading()
					let list=Array.isArray(res.data.user_list)?res.data.user_list:[];
					if(list.length == 0)return uni.showToast({title:'暂无间推数据！',icon:'none'})
					this.user_list[index].childer = list;
				})
			},
			// 二级滑块 滑块点击
			switchChange1(e) {
				if (e.detail.value) {
					uni.request({
						url: 'https://cx.mingmeijt.com/Api/User/myFriend',
						method: 'POST',
						data: {
							user_id: this.user_id,
							select_user_id: e.currentTarget.dataset.id,
							session_id: uni.getStorageSync("sessionid")
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							if (res.data.code == 999) {
								uni.navigateTo({
									url: '/pages/999/999'
								})
							};
							this.res3 = res.data
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					this.res3 = []
					this.res4 = []
				}
			},
			// 三级滑块点击
			switchChange2(e) {
				if (e.detail.value) {
					uni.request({
						url: 'https://cx.mingmeijt.com/Api/User/myFriend',
						method: 'POST',
						data: {
							user_id: this.user_id,
							select_user_id: e.currentTarget.dataset.id,
							session_id: uni.getStorageSync("sessionid")
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							if (res.data.code == 999) {
								uni.navigateTo({
									url: '/pages/999/999'
								})
							};
							this.res4 = res.data
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					this.res4 = []
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #f2f5fa;
		height: 100vh;
		
		background: url('../../static/haibei/bg.png') 0 -110rpx no-repeat;
		background-size: 100% 120%;
	}

	.container {
		width: 100%;
		height: 100vh;
		
		box-sizing: border-box;
		overflow: auto;
	}	
	.container {
			width: 100%;
		height: 100vh;
		
			box-sizing: border-box;
	}
	.face {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		background-color: #fff;
	}

	.content {
		padding: 15rpx;
	}

	.num_box {
		padding: 40rpx 30rpx;
		// background: #2190a3;
		display: flex;
		align-items: center;

		.num_box-left {
			width: 35%;

			.num_box-leftitem {
				height: 70rpx;
				text-align: center;
				border-radius: 10rpx;
				// background-color: #64b2bf;
				text-align: center;
				line-height: 70rpx;
				font-size: 28rpx;
				color: #f5e0bd;
			}
		}

		.num_box-right {
			width: 65%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

		.num_box-right-text {
			font-size: 28rpx;
			color: #f5e0bd;
		}

		.num_box-right-num {
			font-size: 50rpx;
			color: #f5e0bd;
			font-weight: bold;
		}
	}

	.jy-yj {
		// padding: 30rpx 60rpx;
		// background-color: #FFFFFF;
		margin-top: 30rpx;
		
		
		.jy-yj-title {
			padding: 20rpx 0;
			font-size: 32rpx;
			font-weight: bold;
			border-bottom: 1px solid #e0e0e0;
			color:#231815;
		}
	
		.jy-yj-list {
			display: flex;
			align-items: center;
			justify-content: space-around;
			.jy-yj-item {
				width: 48%;
				padding: 6rpx 0;
				line-height: 30rpx;
				background: url('/static/haibei/item_bg.png') center no-repeat;
				background-size: 100% 100%;
				padding: 20upx 15upx;
				.list-title {
					// padding: 6rpx 0;
					font-size: 32rpx;
					color:#231815;
					width: 100%;
					display: flex;
					justify-content: space-between;
				}

				.list-num {
					// padding: 6rpx 0;
					font-size: 36rpx;
					font-weight: bold;
					color:#000;
				}
			}

			.border-left {
				border-left: 1px solid #e0e0e0;
			}
			

			.border-top {
				border-top: 1px solid #e0e0e0;
			}

			.padding-left {
				padding-left: 40rpx;
			}
		}
	}

	.sale-group {
		margin-top: 30rpx;

		.sale-title {
			font-size: 32rpx;
			font-weight: bold;
			color:#81551b;
		}
		.sale-list-jt{
			background: url('/static/haibei/item_bg.png') center no-repeat;
			background-size: 100% 100%;
		}
		.sale-list-zu{
			background: url('/static/haibei/item_bg.png') center no-repeat;
			background-size: 100% 100%;
		}
		.sale-list {
			padding: 30rpx 40rpx;
			margin-bottom: 30rpx;
			.sale-ids {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.sale-ids-left {
					display: flex;
					align-items: center;
					font-size: 28rpx;

					.sale-ids-index {
						font-weight: bold;
						color:#221714;
					}

					.sale-ids-btn {
						padding: 0 20rpx;
						border-radius: 6rpx;
						
						color: #000;
						margin-left: 20rpx;
					}
					
					.sale-ids-btn-jt {
						padding: 0 20rpx;
						border-radius: 6rpx;
					
						color: #000;
						margin-left: 20rpx;
					}

					.sale-ids-id {
						color: #221714;
						margin-left: 20rpx;
					}
				}
				.sale-ids-switch{
					display: flex;
					align-items: center;
					font-size: 22rpx;
				}
			}
			
			.sale-ids-switch-active{
				color:#f5e0bd!important;
			}
			.sale-ids-switch-inactive{
				color:#231815!important;
			}
			.sale-ids-switch-active-jt{
				color:#a9152b!important;
			}
			.sale-ids-switch-inactive-jt{
				color:#2190a3!important;
			}

			.sale-peron {
				display: flex;
				align-items: center;
				padding-top: 20rpx;

				.sale-peron-item {
					width: 33.33%;
					font-size: 28rpx;
					color: #231815;
				}
			}

			.sale-yj {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				justify-content: space-between;
				.sale-yj-item {
					width: 33%;
					font-size: 28rpx;
					text-align: center;
					.sale-yj-item-money {
						color: #000;
						font-size: 20px;
						font-weight: 600;
						min-height: 60rpx;
					}
					
					.sale-yj-item-money-jt {
						color: #000;
						font-size: 20px;
						font-weight: 600;
						min-height: 60rpx;
					}

					.sale-yj-item-text {
						color: #231815;
					}
					.sale-yj-item-text-jt{
						 color: #231815;
					}
				}
			}
		}
	}
	.mingxi{
		border: 1px solid #FAFAFB;
		width: 30%;
		text-align: center;
		font-size: 12px;
		height: 20px;
		border-radius: 50px;
		background-color: #FAFAFB;
	}
</style>
